<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<view style="z-index: -10;">
			<image src="http://n298651t63.zicp.vip:9001/image/file/20221017/a578b44580e04cf1ad7d27731fc01dbe_new.png"
				style="width: 100%;height: 40vh;"></image>
			<view class="heardImage"></view>
			<view class="heardTxt flex align-center margin-lr-sm justify-between">
				<view class="flex align-center" @click="changeCity">
					<u-icon name="map" color="#fff" size="18"></u-icon>
					<span class="margin-left-xs text-white text-df">{{city}}</span>
				</view>
				<view class="heardTxt_right">
					<u-icon name="search" color="#fff" size="20"></u-icon>
					<u-input v-model="searchWord" border="none" style="border: 0px;font-size: 28rpx;" color="#fff"
						fontSize="14" placeholder="搜索附近的棋牌室" placeholderStyle="color:#fff;font-size:24rpx"></u-input>
					<button class="btnSearch" @click="getStoreList">搜索</button>
				</view>
			</view>
		</view>
		<!-- 展示地区店铺列表 -->
		<view class="centerBox">
			<view v-for="(item,index) in storeList" :key="index" class="storeBox  bg-white radius"
				@click="goStoreDetalis(item)">
				<view style="display: flex;align-items: center;justify-content: space-between;"
					class="margin-bottom-sm">
					<view>
						<view class="text-black text-bold  text-xl">{{item.StoreName}}</view>
						<view class="margin-top-xs text-gray text-sm">营业时间：{{item.OPTime}}-{{item.OPEndTime}}</view>
					</view>
					<u-icon @click.native.stop="callPhone(item)" name="phone" size="24" color="#CCAC82"></u-icon>
				</view>
				<view style="display: flex;column-gap: 1px;align-items: center; justify-content: space-between;">
					<image v-for="(image,i) in item.Images" :key="i" mode="scaleToFill" :src="image.url"
						style="height: 160rpx;width: 160rpx;border-radius: 10rpx;"></image>
				</view>
				<view class="flex align-center justify-start margin-top-sm">
					<u-tag v-for=" i in item.parts" :key="i" :text="i" plain shape="circle" size="mini" bg-color="#fff"
						border-color="#eee" color="#999"></u-tag>
				</view>
				<view class="margin-top-lg flex align-center justify-between">
					<u-tag :text="item.szie" shape="circle" color="#fff" bg-color="#CCAC82" border-color="#CCAC82">
					</u-tag>
				</view>
				<text class="text-gray">查看详情</text>
			</view>
			<!-- <unicloud-city-select ref="citySelect" :hot-city="hotCity" :location="false"
				@select="select"></unicloud-city-select> -->

		</view>

	</view>
</template>

<script>
	import QQMapWX from '@/config/qqmap-wx-jssdk.js'
	import {
		quershop,
		quershopurl,
		url,
		querbysname
	} from '@/request/api_user.js'
	export default {
		name: 'Home',
		data() {
			return {
				storeList: [],
				searchWord: '', //搜索内容
				showOpenDoorModal: false,
				contentOpenDoor: '',
				city: 'xx市',
				// 热门城市
				hotCity: [{
						code: "110100",
						name: "北京"
					},
					{
						code: "310100",
						name: "上海"
					},
					{
						code: "330100",
						name: "杭州"
					},
					{
						code: "440100",
						name: "广州"
					},
					{
						code: "440300",
						name: "深圳"
					},
					{
						code: "320100",
						name: "南京"
					},
					{
						code: "500100",
						name: "重庆"
					},
					{
						code: "510100",
						name: "成都"
					}
				]
			}
		},
		computed: {

		},
		created() {
			quershop({
				"site": "郴州"
			}).then((req) => {
				this.show(req)
			})
			//this.getStoreList();
			// this.citys()
		},
		methods: {
			citys() {
				const ts = this
				uni.authorize({
					scope: 'scope.userLocation',
					success(req) {
						console.log('尝试获取当前位置...', req);
						uni.getLocation({
							type: 'wgs84',
							geocode: true, // 如果需要地理编码信息
							success: function(res) {
								console.log('位置信息：', res);
								if (res.errMsg === 'getLocation:ok') {
									// 成功获取位置信息，可以在这里处理 res 数据
									console.log('城市：', res);
									ts.getAddress(res.latitude, res.longitude)
								} else {
									// 获取位置失败
									console.error('获取位置失败', res.errMsg);
								}
							},
							fail: function(err) {
								console.error('调用位置服务失败', err);
							}
						});
					}
				})
			},
			callPhone(item) {
				//#ifdef MP-WEIXIN
				uni.makePhoneCall({
					phoneNumber: item.phone
				});
				//#endif
				//#ifdef APP-PLUS
				plus.device.dial(item.Phone, true);
				//#endif
			},
			//搜索门店
			getStoreList() {
				this.storeList = []
				querbysname({
					"sname": this.searchWord,
					"site": "郴州"
				}).then((req) => {
					if (req.data.data.length === 0) {
						uni.showToast({
							title: '未搜索到相关门店',
							icon: 'none'
						})
					} else {
						this.show(req)
					}
				})

			},
			goPage(page) {
				let url = '';
				uni.$u.route({
					type: 'to',
					url: url
				});
			},
			goStoreDetalis(item) {
				uni.setStorageSync('storeid', item.id);
				uni.setStorageSync('StoreName', item.StoreName);
				uni.switchTab({
					url: '/pages/user/index/storeindex',
				})
			}, //地址按钮
			changeCity() {
				this.$refs.citySelect.open();
			},
			getAddress(latitude, longitude) {
				const tx = this
				// 生成 QQMapWX 实例
				let qqmapsdk = new QQMapWX({
					key: 'UMIBZ-OS2KB-LVOUP-JYEEG-IU777-O3BVJ'
				})

				// reverseGeocoder 为 QQMapWX 解析 经纬度的方法
				qqmapsdk.reverseGeocoder({
					location: {
						latitude,
						longitude
					},
					success(res) {
						console.log('success', res)
						tx.city = res.result.ad_info.city
						// tx.setData({
						//     // ad_info: res.result.ad_info
						//     city： res.result.ad_info
						// })
					},
					fail(err) {
						console.error('逆地理编码失败', err);
					}
				})
			},
			select(city) {
				this.city = city.name;
				//show(city.name)
			}, //显示门店
			show(req) {
				console.log("显示门店");
				console.log(req);
				req.data.data.forEach((item) => { // 使用 forEach 而不是 map，因为我们不需要返回值
					console.log(item);
					quershopurl({
						"id": item.id
					}).then((d) => {
						const images = d.data.data.map((s) => ({
							"url": s.url
						}));
						const parts = item.introduce.split(','); // 使用小数点作为分隔符分割字符串

						console.log(parts); // 输出分割后的数组
						this.storeList.push({
							"phone":item.phone,
							'id':item.id,
							"StoreName": item.same,
							"OPTime": item.optime,
							"OPEndTime": item.opendtime,
							"Images": images, // 确保这里是数组
							"parts": parts,
							"szie": item.szie + '小时起订'
						});
						console.log(this.storeList);
					});
				});
			}
		}
	}
</script>

<style scoped>
	.heardTxt {
		position: fixed;
		top: 0px;
		padding: 20rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		margin-top: 11vh;
	}

	.heardTxt_right {
		background: rgba(0, 0, 0, .3);
		border-radius: 20px;
		z-index: 2;

		width: 75%;
		height: 60rpx;
		/* 	right: 10px; */
		display: flex;
		align-items: center;
		padding: 20rpx;
		/* margin-top: 11vh; */
	}

	.heardImage {
		background: rgba(0, 0, 0, .3);
		width: 100%;
		height: 40vh;
		position: fixed;
		top: 0px;
	}


	.btnSearch {
		height: 50rpx;
		width: 160rpx;
		border-radius: 40rpx;
		color: #CCAC82;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		line-height: 50rpx;
		border: 0px !important;
	}

	.centerBox {
		position: fixed;
		top: 17vh;
		width: 100%;
		padding: 20rpx;
		height: 80vh;
		overflow: auto;
	}

	.storeBox {
		margin: 20rpx 10rpx;
		height: auto;
		padding: 20rpx
	}

	.boxImage {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 20rpx;
		margin-top: 20rpx;
	}
</style>